<template>
  <div class="common-main">
    <el-table
      ref="multipleTable"
      v-loading="loading"
      :data="tableData"
      border
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="showSelectCheckBox"
        type="selection"
        align="center"
        width="50px"
      />
      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :label="item.label"
        :prop="item.prop"
        :align="item.align ? item.align : 'left'"
        :width="
          item.width ? item.width : item.prop === 'operation' ? '170' : ''
        "
        :class-name="item.prop === 'operation' ? 'flex' : ''"
      >
        <!-- 以下列位置可不固定，但父组件列位置需要固定 -->
        <!-- 需要格式化列 -->
        <template v-if="item.formatter" v-slot="scope">
          <slot :name="item.prop" :scope="scope" />
        </template>
        <!-- 图片列 -->
        <template v-else-if="item.image" v-slot="scope">
          <img
            :src="$getFile + scope.row[item.prop]"
            alt=""
            class="table-img"
          >
        </template>
        <!-- 状态列 -->
        <template v-else-if="item.prop === 'status'" v-slot="scope">
          <el-button
            size="mini"
            :type="scope.row.status === 0 ? 'primary' : 'warning'"
            class="nocursor"
          >{{ scope.row.status === 0 ? "启用" : "禁用" }}</el-button>
        </template>
        <!-- 操作列 -->
        <template v-else-if="item.prop === 'operation'" v-slot="scope">
          <el-dropdown
            split-button
            type="primary"
            trigger="click"
            @click="handleCommand('check', scope)"
            @command="handleCommand($event, scope)"
          >
            查看
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="showButtons.update"
                command="update"
              >编辑</el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.status === 1"
                command="enable"
              >
                启用
              </el-dropdown-item>
              <el-dropdown-item
                v-if="scope.row.status === 0"
                command="disable"
              >
                禁用
              </el-dropdown-item>
              <el-dropdown-item command="delete">{{
                deleteButtonsText
              }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="footerButtons" class="common-btn-box">
      <el-button
        type="danger"
        @click="deleteDataMuilty"
      >
        批量{{ deleteButtonsText }}
      </el-button>
      <el-button
        type="warning"
        @click="updateStatusMuilty(1)"
      >
        批量禁用
      </el-button>
      <el-button
        type="primary"
        @click="updateStatusMuilty(0)"
      >
        批量启用
      </el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <template v-else>
      <slot name="footerButtons" />
    </template>
    <div class="common-page-block">
      <pagination
        v-show="totalSize > 0"
        :total="totalSize ? totalSize : 0"
        :page.sync="queryObj.pageNum"
        :limit.sync="queryObj.pageSize"
        layout="prev, pager, next, jumper"
        @pagination="queryData"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'TableComponent',
  props: {
    // 删除按钮文字
    deleteButtonsText: {
      default: '删除',
      type: String
    },
    // 底部按钮
    footerButtons: {
      default: true,
      type: Boolean
    },
    // 按钮对象
    buttonsObj: {
      default: () => {},
      type: Object
    },
    // 需要给后端传的查询参数
    queryObj: {
      default: () => {},
      type: Object
    },
    totalSize: {
      default: 0,
      type: Number
    },
    // 表格数据
    tableData: {
      default: () => [],
      type: Array
    },
    // 表头
    tableHeader: {
      default: () => [],
      type: Array
    },
    loading: {
      default: false,
      type: Boolean
    },
    showSelectCheckBox: {
      default: true,
      type: Boolean
    },
    needSelection: {
      default: false,
      type: Boolean
    }
  },
  data() {
    const add = this.$buttons(this.buttonsObj.add);
    const update = this.$buttons(this.buttonsObj.update);
    const enable = this.$buttons(this.buttonsObj.enable);
    const deleter = this.$buttons(this.buttonsObj.delete);
    const disable = this.$buttons(this.buttonsObj.disable);
    const deleteMuilty = this.$buttons(this.buttonsObj.deleteMuilty);
    const disbleMuilty = this.$buttons(this.buttonsObj.disbleMuilty);
    const enableMuilty = this.$buttons(this.buttonsObj.enableMuilty);
    return {
      showButtons: {
        add,
        update,
        enable,
        disable,
        deleter,
        deleteMuilty,
        disbleMuilty,
        enableMuilty
      }
    };
  },
  methods: {
    handleSelectionChange(val) {
      if (this.needSelection) {
        this.$emit('handleSelectionChange', val);
      } else {
        const ids = [];
        for (const item of val) {
          ids.push(item.id);
        }
        this.$emit('update:ids', ids);
      }
    },
    queryData() {
      this.$emit('queryData');
    },
    // 操作按钮
    handleCommand(type, scope) {
      this.$emit('handleCommand', type, scope);
    },
    // 批量删除
    deleteDataMuilty() {
      this.$emit('deleteDataMuilty');
    },
    // 批量更新状态
    updateStatusMuilty(type) {
      this.$emit('updateStatusMuilty', type);
    },
    // 取消选择
    toggleSelection() {
      this.$emit('toggleSelection');
    }
  }
};
</script>

<style lang="scss" scoped>
.common-main {
  >>> .flex {
    .cell {
      display: flex;
    }
  }
}

.common-main {
  .table-img {
    max-width: 100%;
  }
  .nocursor {
    cursor: default;
  }
}
</style>
